<template>
  <lc-crud
    ref="curd"
    :default-sort="{
      prop: 'sort',
      order: 'ascending'
    }"
    :column="column"
    :st-moda="'tree-table'"
    :record="record"
    :search="search"
    :option="option"
    :operator="operator"
    :expand-change="expandChange"
    :noCache="true"
    :no-page="true"
    data="/lc-system/department?parentId=noParent"
  />
</template>
<script setup lang="ts" name="sys-menu">
import { TCrudComponent, TRecord } from "@/components/crud/interface";
import {
  ITableColumn,
  STExposeComponent,
  TOporaterOption
} from "@/components/st/interface";
import LcCrud from "@/components/crud/crud.vue";
import { ref } from "vue";
import { TextAreaUI } from "@/components/sf/interface";
import { NzSafeAny } from "@/components/sf/type";
import { useAclHooks } from "@/core/pinia/store/acl.store";
import { Http } from "@/core/api/http.service";
defineOptions({
  name: "department"
});
const curd = ref<TCrudComponent>(null);
const acls = useAclHooks();
const expandChange = (res: Record<string, NzSafeAny>, _: number) => {
  return `/lc-system/department?parentId=${res.id}`;
};
const operator = { delHide: true } as TOporaterOption;
const search = {
  properties: {
    title: {
      title: "部门名称",
      ui: {
        placeholder: "请输入部门名称"
      }
    }
  }
};
const option = {
  title: "部门"
};
const record = {
  schema: {
    properties: {
      parent: {
        type: "string",
        title: "上级",
        ignore: true,
        ui: {
          placeholder: "请输入名称",
          grid: {
            span: 24
          },
          disabled: true,
          visibleIf: {
            parent: (val: any) => !!val
          },
          preFormat: (val: any) => {
            return val?.title;
          }
        }
      },
      title: {
        type: "string",
        title: "名称",
        ui: {
          placeholder: "请输入名称",
          grid: {
            span: 24
          }
        }
      },
      icon: {
        type: "string",
        title: "图标",
        ui: {
          placeholder: "请输入菜单图标",
          grid: {
            span: 12
          }
        }
      },
      sort: {
        type: "number",
        title: "序号",
        ui: {
          placeholder: "序号",
          grid: {
            span: 12
          }
        },
        default: 1
      },
      isLeaf: {
        title: "叶子",
        ui: {
          widget: "switch",
          inlinePrompt: true,
          activeText: "是",
          inactiveText: "否"
        },
        default: false
      },
      forbidden: {
        title: "禁用",
        ui: {
          widget: "radio",
          items: [
            { label: "否", value: false },
            { label: "是", value: true }
          ],
          border: true
        },
        default: false
      },
      roles: {
        type: "string",
        title: "角色",
        ui: {
          placeholder: "角色选择",
          clearable: true,
          multiple: true,
          widget: "select",
          preFormat: (data: { id: string }[]) => {
            return (data || []).map(r => r.id);
          },
          nxtFormat: (data: string[]) =>
            Array.isArray(data) ? data.map(r => ({ id: r })) : [],

          items: () => Http.of().get("/lc-system/role/select/list")
        },
        default: null
      },
      remark: {
        type: "string",
        title: "备注",
        ui: {
          widget: "textarea",
          maxLength: 300,
          placeholder: "备注"
        } as TextAreaUI
      }
    },
    required: ["parent", "isLeaf", "title", "sort", "forbidden", "icon"]
  }
} as TRecord;
const column = [
  {
    label: "序号",
    width: 80,
    sortable: true,
    prop: "sort"
  },
  { label: "图标", prop: "icon", type: "icon", width: 80 },
  { label: "名称", prop: "title" },
  {
    label: "是否禁用",
    prop: "forbidden",
    type: "tags",
    tags: {
      true: { text: "禁用", type: "danger" },
      false: { text: "启用", type: "" }
    }
  },
  {
    label: "角色",
    prop: "roles",
    type: "tag",
    formatter: (roles: { name: string }[]) => {
      return Array.isArray(roles) && roles.length ? roles.map(r => r.name) : "";
    }
  },
  {
    prop: "createTime",
    type: "date",
    sortable: true,
    label: "创建"
  },
  {
    prop: "remark",
    showOverflowTooltip: true,
    label: "备注"
  },
  {
    label: "操作",
    width: 300,
    acl: {
      points: acls.getAclArray("patch", "delete", "post"),
      mode: "oneOf"
    },
    buttons: [
      {
        text: "编辑",
        icon: "ant-design:edit-filled",
        acl: { points: [acls.getMenuAcl("patch")] },
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value?.update(data).subscribe(() => st.reset())
      },
      {
        text: "添加下级",
        icon: "ant-design:plus-square-filled",
        divider: "dashed",
        acl: { points: [acls.getMenuAcl("post")] },
        iif: (item: Record<string, NzSafeAny>) => !item.isLeaf,
        click: (data: NzSafeAny, st: STExposeComponent) =>
          curd.value
            ?.add(
              {
                parentId: data.id,
                parent: {
                  title: data.title
                }
              },
              "子部门"
            )
            .subscribe(() => st.resetChild(data))
      },
      {
        text: "更多",
        divider: "dashed",
        acl: { points: acls.getAclArray("delete"), mode: "oneOf" },
        children: [
          {
            text: "删除",
            type: "del",
            acl: { points: [acls.getMenuAcl("delete")] },
            icon: "ant-design:delete-filled",
            click: (data: NzSafeAny, st: STExposeComponent) =>
              curd.value?.delOne(data?.id).subscribe(() => st.reset())
          }
        ]
      }
    ]
  }
] as ITableColumn[];
</script>
@/components/st/interfaces @/components/crud/interfaces
@/components/sf/interfaces @/components/sf/types
